{%- liquid
  case section.settings.color_schema
    when 'primary'
      assign background_color = 'bg-primary'
    when 'secondary'
      assign background_color = 'bg-secondary'
    when 'inverse'
      assign background_color = 'bg-inverse'
    when 'white'
      assign background_color = 'bg-white'
    when 'black'
      assign background_color = 'bg-black'
  endcase

  case section.settings.text_color
    when 'white'
      assign text_color = 'text-body-inverse'
    else
      assign text_color = ''
  endcase
-%}

<div class="{{ section.settings.section_margin_top }} {{ section.settings.section_margin_bottom }}">
  <div class="{{ background_color }}">
    <div class="container">
      <div class="content-inner d-flex">
        <ul class="nav tab-list mx-auto text-nowrap flex-nowrap as-tabs">
          {%- for block in section.blocks -%}
            <li class="nav-item d-flex" role="presentation">
              <a class="as-tab-item tab-item py-3 {% if forloop.first %}active ms-0{% elsif forloop.last %}me-0{% endif %} cursor-pointer {{ text_color }}"
                data-tab-label="{{ block.settings.target_text | strip }}">
                {{ block.settings.tab_label }}
              </a>
            </li>
          {%- endfor -%}
        </ul>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.as-tab-item').forEach(tab => {
      tab.addEventListener('click', function () {
        const label = this.dataset.tabLabel?.trim();

        if (!label) return;

        // Case 1: If label is a URL (starts with http or /)
        if (label.startsWith('http') || label.startsWith('/')) {
          window.location.href = label;
          return;
        }

        // Case 2: If label includes the word "slider"
        if (label.toLowerCase().includes('slider')) {
          const slider = document.querySelector('[data-slider]');
          if (slider) {
            slider.scrollIntoView({ behavior: 'smooth' });
          } else {
            alert('Slider section not found.');
          }
          return;
        }

        // Case 3: Treat label as section ID or custom class
        const target = document.getElementById(label) || document.querySelector(`.${label}`);
        if (target) {
          target.scrollIntoView({ behavior: 'smooth' });
        } else {
          alert(`No matching section found for: ${label}`);
        }
      });
    });
  });
</script>

{% schema %}
{
  "name": "Category-Tab",
  "class": "as-category-tab category-tab position-sticky",
  "tag": "section",
  "settings": [
    
    {
      "type": "select",
      "id": "color_schema",
      "label": "Background color",
      "options": [
        { "value": "primary", "label": "Primary" },
        { "value": "secondary", "label": "Secondary" },
        { "value": "inverse", "label": "Inverse" },
        { "value": "white", "label": "White" },
        { "value": "black", "label": "Black" }
      ],
      "default": "white"
    },
    {
      "type": "select",
      "id": "text_color",
      "label": "Text color",
      "options": [
        { "value": "white", "label": "White" },
        { "value": "black", "label": "Black" }
      ],
      "default": "black"
    },
    {
      "type": "select",
      "id": "section_margin_top",
      "label": "Section top space",
      "options": [
        { "value": "", "label": "None" },
        { "value": "mt-3", "label": "Small" },
        { "value": "mt-section", "label": "Large" }
      ],
      "default": "mt-3"
    },
    {
      "type": "select",
      "id": "section_margin_bottom",
      "label": "Section bottom space",
      "options": [
        { "value": "", "label": "None" },
        { "value": "mb-3", "label": "Small" },
        { "value": "mb-section", "label": "Large" }
      ],
      "default": ""
    }
  ],
  "blocks": [
    {
      "type": "tab",
      "name": "Tab",
      "settings": [
        {
          "type": "text",
          "id": "tab_label",
          "label": "Tab Label",
          "default": "Tab"
        },
        {
          "type": "text",
          "id": "target_text",
          "label": "custom class",
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Category-Tab"
    }
  ]
}
{% endschema %}
